<template>
    <div class="body goShare" :class="{imgnewclass:ifnewImgbase==false}">
        <div ref="imageWrapper">
            <slot v-if="!imgshow">
                <div class="imgboxnew" v-if="refresh">
                    <div class="" v-if="!ifnewImgbase">
                        <div class="sr_tltle">
                            <!--<img :src="orderimg" alt="">-->
                            <span v-html="name"></span>
                        </div>
                        <div class="sr_tbox">
                            <img :src="protypeimg" alt="">
                        </div>
                        <div class="sr_title" v-html="name"></div>

                        <div class="sr_erweima" id="erweimabox" ref="erweimabox">
                            <img :src="proid" id="erweima" alt="">
                            <p>长按图片分享 . 识别二维码</p>
                        </div>
                    </div>
                    <div class="newimnwrap" v-if="ifnewImgbase">
                        <img :src="basenewimg" class="newclassimg" alt="">
                        <img :src="proid" class="erweimanew" alt="">
                    </div>
                </div>
            </slot>
            <div class="shareimg" v-if="imgshow">
                <img class="real_pic" style="width: 7.5rem;" :src="dataURL"/>
                <!--<a :href="dataURL"  download="微金网" style="width: 100%;height: 100%;display: block;">-->
                <!---->
                <!--</a>-->
            </div>
        </div>
    </div>
</template>

<script>

    import {Indicator} from 'mint-ui';
    import {Toast} from 'mint-ui';
    import $ from 'jquery'
    import domtoimage from 'dom-to-image';

    export default {
        name: "goShare",
        data() {
            return {
                orderimg: "",
                name: "",
                proid: '',
                refresh: false,
                protypeimg: '',
                dataURL: '',
                imgshow: false,
                basenewimg: '',
                imgHeight: '',
                imgWidth: '',
                ifnewImgbase: true
            }
        },
        mounted() {
            Indicator.open('海报生成中...');
            this.$store.state.navTabstatu = 1;
            let odata = JSON.parse(localStorage.proimg);
            if (localStorage.proimg) {
                this.orderimg = odata.orderimg;
                if (odata.orderimg.split("jpg").length <= 1) {
                    this.ifnewImgbase = false;
                    setTimeout(() => {
                        this.toImage()
                    }, 500)
                } else {
                    //新的
                    this.ifnewImgbase = true;
                    this.erweimaonload();
                    this.imgonload(odata.orderimg);
                }
                this.name = odata.name;
                this.proid = '/apis/partner/imageCode/' + odata.produckid + '/' + odata.uid;
                if (odata.productType == "0") {
                    this.protypeimg = require("../images/sha_daikuan2.png")
                } else {
                    this.protypeimg = require("../images/sha_daikuan.png")
                }
                this.refresh = true;
            }
        },
        methods: {
            erweimaonload() {
                let that = this;
                let image = new Image();
                image.crossOrigin = '';
                image.src = this.proid;
                image.onload = function () {
                    setTimeout(() => {
                        that.toImage()
                    }, 500)
                }
            },
            imgonload(imgurl) {
                let that = this;
                getBase64(imgurl)
                    .then(function (base64) {
                        that.basenewimg = base64
                        that.erweimaonload();
                    }, function (err) {
                        Indicator.close();
                        Toast('请重新上传海报');
                        console.log(err);//打印异常信息
                    });

                //传入图片路径，返回base64
                function getBase64(img) {
                    function getBase64Image(img, width, height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
                        let canvas = document.createElement("canvas");
                        canvas.width = width ? width : img.width;
                        canvas.height = height ? height : img.height;
                        let ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        let dataURL = canvas.toDataURL();
                        return dataURL;
                    }

                    let image = new Image();
                    image.crossOrigin = '';
                    image.src = img;
                    let deferred = $.Deferred();
                    if (img) {
                        image.onload = function () {
                            that.imgHeight = image.height;
                            that.imgWidth = image.width;
                            deferred.resolve(getBase64Image(image));//将base64传给done上传处理
                        }
                        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
                    }
                }
            },
            toImage() {
                let width = document.body.clientWidth;
                let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
                let height;
                if (this.ifnewImgbase == true) {
                    height = this.imgHeight * clientWidth / this.imgWidth;
                } else {
                    height = document.body.clientHeight;
                }
                let that = this;
                this.$refs.imageWrapper.style.height = height+"px";
                domtoimage.toSvg(this.$refs.imageWrapper)
                    .then(function (dataUrl) {
                        //console.log(dataUrl)
                        that.imgshow = true;
                        that.dataURL = dataUrl;
                        Indicator.close();
                    }).catch(function (error) {
                    Indicator.close();
                    Toast('请重新上传海报');
                });
                // html2canvas(this.$refs.imageWrapper, {
                //     backgroundColor: null,
                //     width: width,
                //     height: height
                // }).then((canvas) => {
                //     let dataURL = canvas.toDataURL("image/png");
                //     this.imgshow = true;
                //     this.dataURL = dataURL;
                //     Indicator.close();
                // });
            }
        }
    }
</script>

<style scoped lang="less">
    body {
        overflow: hidden;
    }

    .imgnewclass {
        background: url("../img/goshare.png") center top no-repeat;
        background-size: 100% 100%;
    }

    .goShare {
        .imgboxnew {
            .newimnwrap {
                position: relative;

                .newclassimg {
                    width: 100%;
                }

                .erweimanew {
                    width: 2rem;
                    position: absolute;
                    bottom: 0.4rem;
                    right: 0.5rem;
                }
            }
        }

        .sr_tltle {
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            margin: 0.6rem 0;

            img {
                width: 0.8rem;
                height: 0.8rem;
                display: inline-block;
            }

            span {
                font-size: 0.4rem;
                color: rgba(255, 255, 255, 1);
                line-height: 0.8rem;
                margin-left: 0.2rem;
                overflow: hidden;
                display: inline-block;
            }
        }

        .sr_tbox {
            overflow: hidden;

            img {
                width: 5.78rem;
                margin: 0.2rem auto;
                display: block;
            }
        }

        .sr_title {
            font-size: 0.4rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.8rem;
            text-align: center;
            margin-top: 0.2rem;
        }

        .sr_erweima {
            overflow: hidden;

            p {
                text-align: center;
                margin-top: 0.6rem;
                font-size: 0.4rem;
                font-weight: 500;
                color: #ffffff;
                line-height: 0.8rem;
            }

            img {
                width: 3rem;
                height: 3rem;
                display: block;
                margin: 0.4rem auto;
            }
        }

        .shareimg {
            width: 7.5rem;
            position: relative;
        }
    }
</style>
